import React, { Component } from 'react'
import axios from 'axios'
/* 
    这一小节的内容主要讲的是React的代理
    由于React专注于视图层的呈现，所以并没有封装独立的ajax库
    所以一般来说，对于ajax请求，我们都是要另外使用其他的请求库来实现
    首推的是，轻量级的 axios
    然后，发送axios请求绕不过去的是跨域问题（也就是需要解决浏览器的同源策略冲突问题）
    
    然后跨域问题主要体现在，ajax引擎在发送请求到其他端口的应用后，如果响应的结果不符合同源策略，那么ajax引擎就会拒绝该响应
    解决的方式有创建代理对象，即在当前客户端端口上开一个代理服务，代理服务只做转发。
    所以当发送请求后如果在客户端找不到符合条件的资源后，会将请求转发给代理对象（和客户端同一个端口），代理对象将请求转发给服务器端
    由于代理对象不是直接发送ajax请求，所以不受到同源策略的限制。同时当代理对象将响应结果返回时，由于是同个端口传输，所以客户端就避免了跨域问题了
*/
export default class App extends Component {

    getStudent = () => {
        axios.get('http://localhost:3000/api1/students').then(
            response =>{
                console.log(response.data);
            },error => {
                console.log(error)
            }
        )
    }

    getCar = () => {
       axios.get('http://localhost:3000/api2/cars').then(response=>{
        console.log(response.data);
       },error=>{
        console.log(error);
       })
    }

    render() {
        return (
            <div>
                <button onClick={this.getStudent}>点击获取学生信息</button>&nbsp;
                <button onClick={this.getCar}>点击获取汽车信息</button>&nbsp;
            </div>
        )
    }
}
